<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡牌管理系统测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }
        .card-pile {
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        .card {
            display: inline-block;
            margin: 5px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            cursor: pointer;
        }
        .card:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        button {
            margin: 5px;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
        .log {
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>卡牌管理系统测试</h1>
        
        <div class="card-pile">
            <h3>抽牌堆 (${game.playerDeck.length})</h3>
            <div id="deck-cards"></div>
        </div>
        
        <div class="card-pile">
            <h3>手牌 (${game.playerHand.length})</h3>
            <div id="hand-cards"></div>
        </div>
        
        <div class="card-pile">
            <h3>弃牌堆 (${game.playerDiscardPile.length})</h3>
            <div id="discard-cards"></div>
        </div>
        
        <div class="card-pile">
            <h3>消耗牌堆 (${game.playerExhaustPile.length})</h3>
            <div id="exhaust-cards"></div>
        </div>
        
        <div>
            <button onclick="game.drawHand()">抽牌</button>
            <button onclick="game.endTurn()">结束回合</button>
            <button onclick="game.reshuffleDeck()">重新洗牌</button>
            <button onclick="game.resetTest()">重置测试</button>
        </div>
        
        <div class="log">
            <h3>战斗日志</h3>
            <div id="battle-log"></div>
        </div>
    </div>

    <script>
        // 简化的卡牌管理系统测试
        class CardSystemTest {
            constructor() {
                this.playerHand = [];
                this.playerDeck = [];
                this.playerDiscardPile = [];
                this.playerExhaustPile = [];
                this.battleLog = [];
                this.maxHandSize = 5;
                
                this.initializeDeck();
                this.updateDisplay();
            }
            
            initializeDeck() {
                this.playerDeck = [
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                    { name: '终结', cost: 2, type: 'attack', damage: 15, description: '造成15点伤害，消耗' },
                    { name: '终结', cost: 2, type: 'attack', damage: 15, description: '造成15点伤害，消耗' }
                ];
                this.playerDiscardPile = [];
                this.playerExhaustPile = [];
                this.shuffleDeck();
                this.addLog('初始化卡组: 7张卡牌');
            }
            
            shuffleDeck() {
                for (let i = this.playerDeck.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [this.playerDeck[i], this.playerDeck[j]] = [this.playerDeck[j], this.playerDeck[i]];
                }
            }
            
            drawHand() {
                const handSize = this.maxHandSize;
                const cardsToDraw = handSize - this.playerHand.length;
                
                for (let i = 0; i < cardsToDraw; i++) {
                    if (this.playerDeck.length === 0) {
                        this.reshuffleDeck();
                    }
                    
                    if (this.playerDeck.length > 0) {
                        this.playerHand.push(this.playerDeck.pop());
                    }
                }
                
                this.addLog(`抽牌: 获得 ${cardsToDraw} 张卡牌`);
                this.updateDisplay();
            }
            
            reshuffleDeck() {
                if (this.playerDiscardPile.length > 0) {
                    this.playerDeck = [...this.playerDiscardPile];
                    this.playerDiscardPile = [];
                    this.shuffleDeck();
                    this.addLog('弃牌堆重新洗入抽牌堆');
                    this.updateDisplay();
                } else {
                    this.addLog('弃牌堆为空，无法重新洗牌');
                }
            }
            
            discardCard(card) {
                const cardIndex = this.playerHand.indexOf(card);
                if (cardIndex > -1) {
                    this.playerHand.splice(cardIndex, 1);
                    this.playerDiscardPile.push(card);
                    this.addLog(`弃牌: ${card.name}`);
                    this.updateDisplay();
                }
            }
            
            exhaustCard(card) {
                const cardIndex = this.playerHand.indexOf(card);
                if (cardIndex > -1) {
                    this.playerHand.splice(cardIndex, 1);
                    this.playerExhaustPile.push(card);
                    this.addLog(`消耗: ${card.name}`);
                    this.updateDisplay();
                }
            }
            
            useCard(card) {
                this.addLog(`使用卡牌: ${card.name}`);
                
                if (card.name === '终结') {
                    this.exhaustCard(card);
                } else {
                    this.discardCard(card);
                }
            }
            
            endTurn() {
                this.addLog('=== 回合结束 ===');
                
                // 手牌进入弃牌堆
                while (this.playerHand.length > 0) {
                    this.playerDiscardPile.push(this.playerHand.pop());
                }
                this.addLog(`手牌进入弃牌堆`);
                
                // 抽牌
                this.drawHand();
                
                this.addLog('=== 新回合开始 ===');
            }
            
            resetTest() {
                this.playerHand = [];
                this.playerDeck = [];
                this.playerDiscardPile = [];
                this.playerExhaustPile = [];
                this.battleLog = [];
                this.initializeDeck();
                this.updateDisplay();
            }
            
            addLog(message) {
                this.battleLog.push(message);
                this.updateLogDisplay();
            }
            
            updateDisplay() {
                // 更新抽牌堆
                const deckContainer = document.getElementById('deck-cards');
                deckContainer.innerHTML = '';
                this.playerDeck.forEach(card => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.textContent = card.name;
                    cardElement.title = card.description;
                    deckContainer.appendChild(cardElement);
                });
                
                // 更新手牌
                const handContainer = document.getElementById('hand-cards');
                handContainer.innerHTML = '';
                this.playerHand.forEach(card => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.textContent = card.name;
                    cardElement.title = card.description;
                    cardElement.onclick = () => this.useCard(card);
                    handContainer.appendChild(cardElement);
                });
                
                // 更新弃牌堆
                const discardContainer = document.getElementById('discard-cards');
                discardContainer.innerHTML = '';
                this.playerDiscardPile.forEach(card => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.textContent = card.name;
                    cardElement.title = card.description;
                    discardContainer.appendChild(cardElement);
                });
                
                // 更新消耗牌堆
                const exhaustContainer = document.getElementById('exhaust-cards');
                exhaustContainer.innerHTML = '';
                this.playerExhaustPile.forEach(card => {
                    const cardElement = document.createElement('div');
                    cardElement.className = 'card';
                    cardElement.textContent = card.name;
                    cardElement.title = card.description;
                    exhaustContainer.appendChild(cardElement);
                });
                
                // 更新标题
                document.querySelector('h3').textContent = `抽牌堆 (${this.playerDeck.length})`;
                document.querySelectorAll('h3')[1].textContent = `手牌 (${this.playerHand.length})`;
                document.querySelectorAll('h3')[2].textContent = `弃牌堆 (${this.playerDiscardPile.length})`;
                document.querySelectorAll('h3')[3].textContent = `消耗牌堆 (${this.playerExhaustPile.length})`;
            }
            
            updateLogDisplay() {
                const logContainer = document.getElementById('battle-log');
                logContainer.innerHTML = this.battleLog.map(log => `<div>${log}</div>`).join('');
                logContainer.scrollTop = logContainer.scrollHeight;
            }
        }
        
        // 初始化游戏
        const game = new CardSystemTest();
    </script>
</body>
</html>
